<template>
  <view class="container">
    <view class="form-item">
      <text class="title">维修方式：</text>
      <radio-group @change="onRepairMethodChange">
        <label>
          <radio value="到店维修" :checked="repairMethod === '到店维修'" /> 到店维修
        </label>
        <label>
          <radio value="上门取车" :checked="repairMethod === '上门取车'" /> 上门取车
        </label>
      </radio-group>
    </view>

	<view class="title">客户信息</view>

    <view class="form-item">
      <text>车主姓名：</text>
      <input type="text" placeholder="请输入车主姓名" v-model="ownerName" />
    </view>

    <view class="form-item">
      <text>联系方式：</text>
      <input type="text" placeholder="请输入联系方式" v-model="contactInfo" />
    </view>

    <view class="form-item">
      <text>预约时间：</text>
      <input type="text" placeholder="请选择时间" v-model="appointmentTime" />
    </view>

    <view class="form-item" :style="{'visibility': visible, 'position' : position}">
      <text>取车位置：</text>
      <input type="text" placeholder="请输入取车位置" v-model="pickupLocation" />
    </view>

	<view class="title">车辆信息</view>

    <view class="form-item">
      <text>车辆类型：</text>
      <picker mode="selector" :range="carTypes" @change="onCarTypeChange">
        <view class="picker">
          {{ selectedCarType }}
        </view>
      </picker>
    </view>

    <view class="form-item">
      <text>车牌号：</text>
      <input style="margin-left: 29rpx;" type="text" placeholder="请输入车牌号" v-model="licensePlate" />
    </view>

	<view class="title">照片</view>

    <view class="form-item">
      <text>整车照片：</text>
	  <view style="margin-left: 63rpx;" @click="uploadPhoto('wholeCar')" class="updateImage">
		  <image src="../../../static/image/cross.png" mode=""/>
		  <view>上传照片</view>
	  </view>
    </view>

    <view class="form-item">
      <text>维修部位照片：</text>
	  <view @click="uploadPhoto('repairPart')" class="updateImage">
	  		  <image src="../../../static/image/cross.png" mode=""/>
	  		  <view>上传照片</view>
	  </view>
    </view>

    <button class="submit-btn" @click="submitForm">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  visible:'hidden',
	  position:'absolute',
      repairMethod: '到店维修',
      ownerName: '',
      contactInfo: '',
      appointmentTime: '',
      pickupLocation: '',
      carTypes: ['轿车', 'SUV', 'MPV', '其他'],
      selectedCarType: '请选择',
      licensePlate: '',
      wholeCarPhoto: null,
      repairPartPhoto: null
    };
  },
  methods: {
    onRepairMethodChange(e) {
      this.repairMethod = e.detail.value;
	  if(e.detail.value==='到店维修'){
		  this.visible='hidden';
		  this.position='absolute';
	  }
	  
	  if(e.detail.value==='上门取车'){
	  		  this.visible='visible';
	  		  this.position='';
	  }
    },
    onCarTypeChange(e) {
      this.selectedCarType = this.carTypes[e.detail.value];
    },
    uploadPhoto(type) {
      // 这里可以添加上传照片的逻辑
      console.log(`上传${type}照片`);
    },
    submitForm() {
      // 这里可以添加提交表单的逻辑
      console.log('提交表单', {
        repairMethod: this.repairMethod,
        ownerName: this.ownerName,
        contactInfo: this.contactInfo,
        appointmentTime: this.appointmentTime,
        pickupLocation: this.pickupLocation,
        selectedCarType: this.selectedCarType,
        licensePlate: this.licensePlate,
        wholeCarPhoto: this.wholeCarPhoto,
        repairPartPhoto: this.repairPartPhoto
      });
	  uni.redirectTo({
	  	url:"/pages/bfb-CheLiangWeiXiu/bookingSuccess/bookingSuccess"
	  })
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.form-item {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  /* background-color: #007aff; */
  align-items: center;
}
.form-item input{
	padding: 5rpx 2rpx;
	border: 1px solid #bfbfbf;
}
.form-item button{
	width: 80rpx;
	height: 80rpx;
}
.updateImage{
	/* background-color: #007aff; */
	text-align: center;
	align-items: center;
	padding: 25rpx;
	border: 1px solid #bfbfbf;
	color: #000;
	width: 150rpx;
	height: 150rpx;
}
.updateImage image{
	width: 45rpx;
	height: 45rpx;
	margin: 25rpx 0;
}
.picker {
  border: 1px solid #ccc;
  padding: 10px;
}
.submit-btn {
  background-color: #007aff;
  color: white;
  text-align: center;
  align-items: center;
  width: 550rpx;
  height: 100rpx;
  font-weight: bold;
}
.title{
	margin-bottom: 15rpx;
	font-weight: bold;
	font-size: 36rpx;
}
</style>
